<template>
  <view class="VerticalBox">
    <div class="menu-wrapper VerticalNav nav" ref="menuWrapper">
      <view class="cu-item needsclick" :class="index==currentIndex?'text-orange cur':''" v-for="(item,index) in dataList"
         @click="selectMenu(index,$event)" :key="index">{{item.categoryName}}</view>
    </div>
    <!-- <div class="menu-wrapper VerticalNav nav" ref="menuWrapper">
      <ul>
        <li class="menu-item" :class="{'text-orange cur':currentIndex===index}" v-for="(item,index) in dataList" :key="index" @click.prevent="selectMenu(index)">
            {{item[nameKey]}}
        </li>
      </ul>
    </div> -->

    <div class="foods-wrapper VerticalMain" ref="foodsWrapper">
      <ul ref="foodsUl">
        <view class="padding-top padding-lr" v-for="(item,index) in dataList" :key="index">
          <view class="cu-bar solid-bottom bg-white ">
            <span class="spint"></span>
            <text class="cuIcon-title text-orange ">
              {{item.categoryName}}
            </text>
          </view>
          <view class="cu-list menu-avatar">
            <view class="cu-item" v-for="(food,cindex) in item.children" :key="`addc-${index}-${cindex}`">
              <slot :row="food" :id="`add-${index}-${cindex}`"></slot>
            </view>
          </view>
        </view>
      </ul>
    </div>
  </view>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    dataList: {
      type: Array,
      default:[],
    },
    nameKey: {
      type: String,
      default: 'name',
    },
  },
  data() {
    return {
      scrollY: '', //记录右侧当前滑动所在位置的Y值
      tops: [], //记录右侧每一个li所对应的Y值，用于位置下标计算
    }
  },
  watch:{
    dataList(){
      // if(this.dataList.length > 0){
      // }
    },
  },
  mounted() {
    setTimeout(() => {
      console.log('dataList：',this.dataList)
      this._initScroll()
      this._initTops()
    },3000)
  },
  computed: {
    //计算当前滑动位置的分类的下标
    currentIndex() {
      const { scrollY, tops } = this
      const index = tops.findIndex((top, index) => {
        //当前值和下标
        //返回一个布尔值
        return scrollY >= top && scrollY < tops[index + 1]
      })
      return index
    },
  },
  methods: {
    //滚动初始化
    _initScroll() {
      //应用滑动组件，实现滑动
      this.scrollMenu = new BScroll('.menu-wrapper', {
        click: true,
      })
      this.scrollFoods = new BScroll('.foods-wrapper', {
        probeType: 2, //监听不了惯性滑动，要想监听改成3
        click: true,
      })
      //触发滑动实时监听
      this.scrollFoods.on('scroll', ({ x, y }) => {
        this.scrollY = Math.abs(y)
      })
      //监听滑动停止时所处的位置
      this.scrollFoods.on('scrollEnd', ({ x, y }) => {
        this.scrollY = Math.abs(y)
      })
    },
    //tops收集初始化,记录右侧每一个li所对应的Y值
    _initTops() {
      const tops = []
      let top = 0
      tops.push(top)
      //获取li
      const lis = this.$refs.foodsUl.children
      //将伪数组转化为真数组，遍历拿到每一个li对应的Y值
      Array.prototype.slice.call(lis).forEach((li) => {
        top += li.clientHeight
        tops.push(top)
      })
      this.tops = tops
    },
    //点击左侧菜单,右侧滑动到指定位置
    selectMenu(index) {
      //拿到当前点击分类右侧对应的top值
      const topY = this.tops[index]
      //点击的时候，右侧分类样式立即改变
      this.scrollY = topY
      //右侧滑动到指定位置
      this.scrollFoods.scrollTo(0, -topY, 300)
    },
  },
}
</script>

<style lang="scss" :scoped="false">
.VerticalBox {
  height: 100%;
  display: flex;
  width: 100%;

  .cu-bar {
    // height: 100rpx;
    // line-height: 100rpx;
    color: #333;
    font-size: 34rpx;
    .spint {
      width: 16rpx;
      height: 16rpx;
      border-radius: 20rpx;
      //background: #f37b1d;
      display: inline-block;
      //margin-left: 32rpx;
      margin-right: 18rpx;
    }
  }
  .VerticalNav.nav {
    min-width: 200rpx;
    width: 16%;
    color: #333;
    white-space: initial;
    font-family: 'PingFangSC-Medium';
    background-color: #f7f7f7;
    font-size: 30rpx;
    .cu-item {
      width: 100%;
      text-align: center;
      background-color: #f7f7f7;
      margin: 0;
      border: none;
      min-height: 100rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cu-item.cur {
      background-color: #fff;
      color: #ffa100;
    }
    .cu-item.cur::after {
      content: '';
      width: 8upx;
      height: 30upx;
      //border-radius: 10upx 0 0 10upx;
      position: absolute;
      background-color: #ff9800;
      top: 0;
      right: 0upx;
      bottom: 0;
      margin: auto;
    }
  }
  .rowNav {
    height: 100rpx;
    width: 100%;
    .cu-item {
      width: auto;
      display: inline-block;
      margin-right: 64rpx;
      height: 48rpx;
      white-space: nowrap;
    }
    .text-orange {
      background: #ffa100;
      color: #fff;
      padding: 0rpx 24rpx;
      border-radius: 100rpx;
    }
    .row-coentent {
      display: flex;
      flex-wrap: nowrap;
      height: 100%;
      align-items: center;
      float: left;
      padding-left: 20rpx;
    }
  }
  .VerticalMain {
    background-color: #fff;
    flex: 1;
  }
  .main-scroll {
    height: calc(100% - 100rpx);
  }
  .cu-list.menu-avatar > .cu-item .content {
    width: calc(100% - 120upx);
  }
  .cu-list.menu-avatar > .cu-item {
    // height: 100px;
  }
}
.VerticalRow {
  flex-direction: column;
}
</style>